【第1184期】滴滴后市场前端技术体系

前言

从“上帝的视角”来看整个体系，今日早读文章由滴滴@wfpaopao授权分享。

正文从这开始～

经过两年的发展，作为汽车后市场各业务重要支撑的前端团队，随着业务的不断发展，从无到有，从基础到完善，沉淀了支撑业务的前端技术体系。

我们说的前端技术体系，指的是，我们在前端边界内，着眼于产出产品和服务的效率和质量，通过拆分和整合产出过程中的关键工作，最终所形成的一套包含代码，工具，理论，规范，文档等的支撑体系。

前端技术体系概括

对于前端边界，我们认为划分的界限，不在于具体的细分技术，而在于职责，简单来说，如果一项开发工作是为了向用户提供可交互的界面，那这就是前端的工作范畴。

与设计团队之间，根据不同的业务场景，制定相应的交互，视觉规范，根据实际产品需求，产出产品交互，视觉稿/原型，这属于设计团队的工作。而对设计团队所产出的不同业务场景下的交互，视觉标准，抽象底层组件接口，进而使用抽象组件，实现不同业务的组件库，最终形成前端的组件体系，进而使用组件体系开发产品，甚至提供搭建工具，让产品，运营人员独立操作生成可交互界面，这些属于前端团队的工作。

与设计团队边界

与后端团队之间，根据产品需求，实现业务逻辑，提供业务维度的原子化接口，这属于后端团队的工作。而提供页面访问服务，控制页面路由，提供可交互界面，消费业务接口，组装页面，甚至提供交互维度的接口，这些属于前端团队的工作。

与后端团队边界

与客户端团队之间，提供代码运行容器，扩展需求可枚举的系统接口，这属于客户端团队的工作。而选择，创建开发工具，于各种客户端容器之上，抽象统一编程接口，基于统一编程接口，产出需求不可枚举的交互界面，这些属于前端团队的工作。

与客户端团队边界

以上前端边界的划分，除了让相关团队职责清晰，降低沟通成本外，带来的额外好处是，配合模式的变化和固化，使得前端团队在与设计，后端，客户端等团队的配合中，始终属于消费者角色，有利于各团队之间的工作并行，并且前端从产品到服务，形成了一个独立闭环，灵活性更好，有利于体验优化工作的开展。

前端边界与配合模式

在以上前端边界内，前端团队关注的是产品的整个生命周期，而在整个生命周期内，我们的关键工作分为应用、代码、工程三个重要部分。

前端关键工作划分

应用方面，总的来说，我们希望提供给用户高可用的服务，从而保证我们产品的用户体验。我们关注前后端分离，客户端容器，差异性收敛，监控和容灾这几个方面。

应用体系

前后端分离方面，我们通过引入一个中间层，来提供页面访问服务。这个中间层，由前端维护，我们对页面请求，页面路由，页面渲染等有完整的控制能力，甚至我们可以基于它实现接口聚合，数据模拟等功能，这些使我们更容易实现页面性能优化，提升用户体验。在整个实施过程中，我们采用，先分离，后优化的策略，保证了整体的稳定性。

客户端容器方面，除了常规的Webview类容器，我们在实际项目中尝试了React-Native, Weex等自定义容器，以解决Webview性能问题。在与微信小程序场景契合度比较高的一些产品，我们也尝试开发了微信小程序应用。我们致力于，在可控的客户端环境内，选用性能更好的客户端容器，从而优化产品体验。同时我们也致力于统一不同容器的使用体验，收敛差异性，降低维护成本。

差异性收敛方面，不同客户端容器有着不同的工作模式，为了降低维护成本，我们需要从业务中，总结实践经验，抽象通用模式，并开发相关的辅助工具，最终将差异性进行收敛。在React-Native的开发过程中，我们提供一套使用体验与Webview完全一致的客户端容器，从而前端对于React-Native项目的发布，更新机制可以完全复用Web类项目。

监控和容灾方面，我们利用公司的日志系统和监控系统，对线上问题进行预警，通过静态资源进行前端服务器和CDN双备，服务多实例等部署策略以及代码级的灰度策略等，加上公司的配置平台做开关，最终形成监控和容灾的基本模式。

代码方面，我们的产出分为前端代码，服务端渲染代码，前端代码最终生成可交互界面，后端代码最终作为服务，响应页面请求，处理页面渲染。对于两种代码，我们都有规范化的代码体系，并且通常情况下，在所有业务中我们都套用这个体系。从而收敛问题，提高产出效率。

对于前端代码，我们主要采用数据驱动的编程模式，组件化的开发方式，配合数据管理，路由管理的基本思路进行业务开发。细节性的来说，我们最终的前端代码体系由基础库和第三方库，组件库，展示组件，容器组件和数据仓库，路由管理这几部分构成。

前端代码体系

对于服务端渲染代码，我们主要使用多进程的请求响应并发模式，采用中间件的请求处理模式，通过将请求路由到具体的控制器，通过控制器中配置的中间件，进行数据的拉取和页面的拼装，最终完成请求响应。

服务端渲染代码体系

代码层面上的细节，每一个展开来说，都会有很长篇幅，比如说组件库的代码设计。对于细节这里我们不做展开，以后找机会再做具体分享。

工程方面，在项目的评审，开发，联调，测试，上线，运营各个环节，我们提供相应的工具支持，以及标准操作流程和文档，从而保证各个环节的产出质量和效率，以及各个环节之间过渡的平滑性。

简单来说，在项目评审阶段，我们提供了使用体验一致的针对不同场景的项目模板；在项目开发阶段，我们提供了开发，调试，单元测试，风格校验等工具；在项目联调测试阶段，我们提供了打包，部署工具，以及前端代码运行环境的docker容器；在项目上线阶段，我们提供了代码打包，部署工具。同时，我们提供了一套cli交互工具，来保证操作的易用性和规范性。

工程体系

以上是对滴滴后市场前端技术体系的整体概括，其中的很多细节都可以单独展开来说，比如如何创建组件体系，如何优化React-Native使用体验，React，Vue体系下，做数据直出，还是页面直出等，我们会尽量找机会再跟大家分享。

最后，为你推荐

关于本文
作者：@wfpaopao
原文：https://juejin.im/post/5a3dd19b6fb9a0452846b159